<template>
  <div>
    <h1>用戶中心</h1>
    <el-input style="width: 200px" v-model="select.phoneCustomer" placeholder="按照手机号查询"></el-input>

    <el-date-picker
        v-model="select.startTime"
        type="datetime"
        placeholder="选择起始日期时间">
    </el-date-picker>
    <el-date-picker
        v-model="select.endTime"
        type="datetime"
        placeholder="选择结束日期时间">
    </el-date-picker>
    <el-button class="selectButton"  style="width: 76px"  type="primary" @click="selectByPhone()">搜索</el-button>
    <el-table :data="customerList" style="width: 100%">
      <el-table-column prop="id" label="序号"></el-table-column>
      <el-table-column prop="nicknameCustomer" label="昵称"></el-table-column>
      <el-table-column prop="phoneCustomer" label="手机号"></el-table-column>
      <el-table-column prop="balance_customer" label="当前余额"></el-table-column>
      <el-table-column prop="integral_customer" label="当前积分"></el-table-column>
      <el-table-column prop="joinTime" label="注册时间"></el-table-column>
      <el-table-column prop="status" label="当前状态">

        <template slot-scope="scope">
          <span>{{ scope.row.status == 0 ? '正常' : '拉黑' }}</span>
        </template>

      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handleSwitchChange(scope.row)">修改状态</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页信息   -->
    <span>
    一共{{ totalCount }}条数据</span>
    <el-pagination
        background
        layout="prev, pager, next"
        @prev-click="prev"
        @next-click="next"
        @current-change="changeCurrentPage"
        :total="this.totalCount"
    >
    </el-pagination>
  </div>
</template>
<script>
import {sendRequest} from "@/util/request";

export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      customerList: [],
      form: {
        id:'',
        status:'',
        currentPage: 1,
        pageSize: 10,
      },
      select:{
        phoneCustomer:'',
        startTime:'',
        endTime:'',
      },
      value:'',
      totalCount: '',
    }
  },
  created() {
    this.showCustomer();
  },
  methods: {
    selectByPhone(){
      sendRequest(
          "post",
          "customer/selectCustomerOfPhone",
          this.select
      ).then(res=>{
        this.customerList = res.list;
        this.select.phoneCustomer='';
        this.select.startTime='';
        this.select.endTime='';
      })
    },
    handleSwitchChange(row){
      this.form.id = row.id,
          this.form.status = row.status != 1 ? 1 : 0;
      sendRequest(
          "post",
          "customer/changeStatus",
          this.form
      ).then(res=>{
        this.$message(res.msg)
        this.showCustomer();
      })
    },
    showCustomer() {
      sendRequest(
          "post",
          "customer/showCustomer",
          this.form
      ).then(res => {
            this.customerList = res.customerList;
        console.log(this.customerList);
        console.log(res.customerList);
        this.totalCount = Number(res.total);
          })
    },
    //点击页数跳转
    changeCurrentPage(item) {
      this.form.currentPage = item;
      this.showCustomer();
    },
    //上一页
    prev() {
      this.form.currentPage++;
      this.form.showCustomer()
    },
    //上一页
    next() {
      this.form.currentPage++;
      this.form.showCustomer()
    },
  }
}

</script>

<style>
.selectButton{

  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}
</style>